<template>
	<view class="background">
		<image class="bg-image" src="../../static/c.png"/>
		<scroll-view scroll-y="true" style="height: calc(100% - 360upx);">
			<view
				v-for="(item, index) in data"
				:key="index"
				style="margin: 0 20upx;">
				<view 
					@tap="toTel(item.servicePhone)"
					class="flex-row" 
					style="background: #FFFFFF; padding: 15upx; border-radius: 16upx;">
					<view 
						class="flex-row"
						style="width: 50upx; height: 50upx; justify-content: center; align-items: center;">
						<view style="width: 28upx; height: 28upx; border-radius: 50%; background: #FF8103;" />
					</view>
					<text style="line-height: 50upx; ">服务电话：</text>
					<text style="line-height: 50upx;">{{`${item.servicePhone}`}}</text>
					<text style="line-height: 50upx; color: #1296db; margin-left: 40upx; font-size: 34rpx; font-weight: bold;">一键拨打</text>
				</view>
				<view
					class="flex-row" 
					style="background: #FFFFFF; padding: 15upx; border-radius: 16upx; margin-top: 20upx;">
					<view 
						class="flex-row" 
						style="width: 50upx; height: 50upx; justify-content: center; align-items: center;">
						<view style="width: 28upx; height: 28upx; border-radius: 50%; background: #FF8103;" />
					</view>
					<text style="line-height: 50upx; flex: 1;">{{item.serviceDesc}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '../../api';
	export default {
		data() {
			return {
				data:[],
			}
		},
		mounted() {
			this.queryCarTypeInfo()
		},
		methods: {
			queryCarTypeInfo(){
				api.service.queryBiServiceCode().then(res=>{
					if(res.code == 200){
						this.data = res?.data || []
					}
				})
			},
			
			toTel(tel){
				uni.makePhoneCall({
				    phoneNumber: tel //仅为示例
				});
			},
			
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.background {
		height: 100%;
		background: #F7F7F7;
		.bg-image {
			height: 350upx;
			width: 100%;
		}
		.flex-row {
			display: flex;
			flex-direction: row;
		}
	}
</style>
